<template>
	<div class="details-chosen">
		<div class="details-chosen-top">
			<div class="details-chosen-top-img">
				<img src="" alt="">
			</div>
			<div class="details-chosen-top-txt">
				<h2 class="details-chosen-title">嘉实多全合成保养套餐</h2>
				<div class="details-chosen-parice"><i>￥</i>298. <span>00</span> <span class="details-chosen-down">直降 <em>￥38.20</em></span></div>
			</div>
			<div>
				<span class="details-chosen-close"> X </span>
			</div>
		</div>
		<div class="details-chosen-bottom">
			<dl class="h_box">
				<dt class="">品牌</dt>
				<dd>
					<span>赛贝飒</span>
					<span>嘉实多</span>
					<span>壳牌</span>
					<span>赛贝飒</span>
				</dd>
			</dl>
			<dl class="h_box">
				<dt class="">类型</dt>
				<dd>
					<span>全合成</span>
					<span>半合成</span>
					<span>高级全合成</span>
				</dd>
			</dl>
			<dl class="h_box">
				<dt class="">升数</dt>
				<dd>
					<span>4L</span>
				</dd>
			</dl>
		</div>
		<!-- end details-chosen-bottom -->
		<div class="details-chosen-btn">
			<button type="button">确定</button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				chonse: [
					// brand: 
				]
			}
		}
	}
</script>

<style lang="scss">

@import '../../assets/css/_variables.scss';
@import '../../assets/css/_functions.scss';
	
.details-chosen {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: rem(375);
	background: $_fff;
	font-family: "Microsoft YaHei";
	.details-chosen-top {
		border-bottom: 1px solid #ccc;
		.details-chosen-top-img {
			width: rem(110);
			height: rem(110);
			background: pink;
			position: absolute;
			top: - rem(30);
			left: rem(10);
			border-radius: rem(5);
		}
		.details-chosen-top-txt {
			padding-top: rem(24);
			padding-left: rem(126);
			padding-bottom: rem(20);
			h2 {
				font-size: rem(16);
				line-height: rem(30);
			}
			.details-chosen-parice {
				color: $_price;
				font-size: rem(16);
				span, i{
					font-size: rem(13);
				}
				.details-chosen-down {
					color: $_999;
					padding-left: rem(10);
				}
			}
		}
		.details-chosen-close {
			position: absolute;
			right: rem(10);
			top: rem(10);
		}
	}
	.details-chosen-bottom {
		padding: rem(14) rem(15);
		dl {
			padding: rem(10);
			dt {
				padding-right: rem(15);
				line-height: rem(28);
			}
			dd {
				span {
					font-size: rem(12);
					display: inline-block;
					padding: rem(5) rem(4);
					border: 1px solid $_a6a6a6;
					border-radius: rem(5);
					min-width: rem(43);
					text-align: center;
					margin-right: rem(10);
				}
			}
		}
	}
	.details-chosen-btn {
		button {
			width: rem(375);
			height: rem(48);
			text-align: center;
			line-height: rem(48);
			border: none;
			background: $_0299f6;
			color: $_fff;
		}
	}
}	

</style>